Юзабилити

[Yahoo!]

Хотелось бы всё-таки узнать, как вам сайт со стороны юзабилити вот он. В IE7 и ниже вкладки едят (((( haslayout не помогает, но постараюсь разобраться.

Edited October 12, 2009 by Yahoo!

[Searcher]

никак... вообще даже затрудняюсь дать рецепт, как из того, что есть, сделать то, что будет удобно... у вас только расположение блоков приемлемое и минимализм заслуживает поощрения, а в остальном ничего и нет, чтобы было удобно пользоваться. А название figa.ru вообще не подходит для данного наполнения. Из него не понятно о чем сайт и причем тут каталог сайтов.

Все законы оформления сайтов строятся на законах оформления печатной продукции. Для того, чтобы понимать удобство пользования надо понимать несколько основополагающих законов. Например:

Человек читает сверху-вниз и слева-направо, значит и элементы по своей важности и иерархии должны находится в таком порядке.

Человек разделает важность информации в зависимости от размера шрифта, его цвета, и фона. Например, два блока с одинаковыми шрифтами и т.п., но у одного будет фон как фон всей страницы, а у другого отличный. Человек в первую очередь обратит внимание на блок с фоном не таким как фон страницы. Цвета тоже различаются по востприятию...

Разделение смысловых блоков должно быть ощутимым и соответствовать их смысловой разнице. Т.е. например меню и реклама должна быть отделена от центрального блока более явно, чем элементы вложенные в эти блоки.

Ну и т.п. нет времени особо расписывать, я уже писал где-то тут более развернуто.

Что у вас?

Начинаю смотреть на сайт, первое, чтобросается в глаза - это реклама. Но тут уж не ваша вина... Второе, когда через несколько секунд понимаешь, что это реклама, а не заголовок сайта, сдвигаешь взгляд ниже. И что? "сделать стартовой"... Ну я не безрукий человек, и сам, если захочу занесу ваш сайт к себе куда захочу. Тем более, что еще не понятно что это за сайт.

Многие после этого увидят надписи "меню" и "реклама" поскольку они явно выделяются среди всего контента. Но главное то в середине... Главное ведь сам каталог, а не навигация. Я уж не говорю о том, что до сих пор не понятно о чем сайт, логотип то какой-то невыразительный. Первое, что человек ждет увидеть, это название книги, журнала, сайта.

Наконец мой взглад добрался до логотипа, но он ни о чем не говорит. Мало того. Вызывает явно негативное ощущение. Мне показывают фигу... Дальше уже не всякий посетитель станет включать логику и выяснять куда же он попал.

Те, кто остался, видят меню. Довольно мелко написано, подчеркивание, отчеркивание, куча разных горизонтальных линий сразу раздражает. Верхняя линия ещё совпадают с горизонталью в центральном блоке, но не точно. Ощущение, что горизонтальные вкладки - это продолжение первого пункта меню. Текущий пункт очень слабо выделяется. Вобщем полный бардак!

Ладно, смотрим в центр. Вкладки корявые, зазубренные. Фон неактивной вкладки ни к селу ни к городу и по цвету явно важнее активной.

При нормальном разрешении расстояние между столбцами каталока больше, чем от меню до первого столбца. Расширяем окно дальше почему-то расширяется только расстояние между колонками каталога, а расстояние от меню и рекламы остается маленьким.

Ну а футер как футер, только цвет фона откуда взят непонятно. В дизайне такого нет. Лучше белым оставить. И расстояние от контента до футера огромное, приходится крутить...

Вобщем, хрень полная. Учитесь типографике, а потом сайты ваяйте.

[Yahoo!]

Спасибо большое за комент.

Вот только насчёт футера, х3 какая там прокрутка? Я его просто прижал к низу а в самом верху и низу это уже не моё (можно мысленно обрезать)! Это уже хостинг повесил. Поэтому если это убрать то прокрутки нет, а разрыв большой... но я думаю что страница дышит, в этом нет ничего плохого.

Насчёт логотипа, это да. Времени не было придумать и рисовать. В верху к логотипу я думую позже приписать "каталог сайтов" или этого не достаточно будет?

Про выделение надо ещё подумать, сейчас выделил бордюром центр и даже не знаю как лучше... как до этого или после.

Вобщем, хрень полная. Учитесь типографике, а потом сайты ваяйте.

Хмм... у меня дома не одна книга о юзабилити!!! Потом я почти весь Бизнес-линч у Лебедева просматрел, поэтому юзабилити хоть и чуточку, но знаю!

Edited October 12, 2009 by Yahoo!

[Verder]

Понаписали, понаписали... шрифт, подчеркивание, футер, реклама... какой нах футер? Какая реклама? Тут юзабилити, если это слово правильно понимать, и не пахнет. Это простая примитивность. Именно не примитивизм, а примитивность. Хотя в Ководстве полезной инфы всего процентов 5, но если вы его читали, то должны понимать различия между этими понятиями.

А насчет книг... хм... по опыту могу сказать - вся эта литература по юзабилити, дизайну и.т.д. просто макулатура. Если дано, то дано. Если нет... ну извини. Книги можно использовать как справочники, допустим, по языкам программирования и не более. Суметь сделать так же, как сделал то человек, который эту книгу написал, вы не сможете, а его мысли, которые полезны только ему, вам могут только навредить.

Edited October 12, 2009 by Verder

[Searcher]

Футер к низу не прижался, возможно из-за хостинга. Получилось, что его не видно и надо прокручивать.

"Сделать стартовой" прижать к правому краю и не надо там фона.

Из меню линии и буллеты убрать, текущий пункт сдвигать вправо и перед ним рисовать какой-нить треугольник цветом из фона подзаголовка "меню".

Хорошо бы сделать горизонтальную подложку под заголовками "Меню" и "Реклама" по всей ширине высотой с эти заголовки серо-голубым цветом как полоса наверху. И уже в этой полосе писать "вы находитесь...". Кстати, почему там написано "вы находитесь: главная"? Где у вас в меню эта "Главная"? Текущий пункт ведь "Каталог сайтов".

Центр, соответственно, опустить ниже полоски.

Неактивную вкладку сделать просто ссылкой безо всяких рамок и фонов.

Увеличить отступы между Меню и центральным блоком и между Центр. блоком и Рекламой и сделать эти отступы резиновыми.

Вот тогда будет уже лучше и, возможно, не понадобится рамка вокруг центрального блока.

[Yahoo!]

Линии в меню по дизайну, текущий пункт я выделил бордюрами, смещением и другим маркером на фоне остальных, мне казалось, что этого достаточно. На счёт подложки не знаю, уменьшил шрифт "Вы находитесь...".

Кстати, почему там написано "вы находитесь: главная"? Где у вас в меню эта "Главная"? Текущий пункт ведь "Каталог сайтов".

Таким образом я обозначил, что каталог сайтов это главная. Подумываю, что "каталог сайтов" убрать из этого списка?

С вкладкой что не так?? У активной нижний бордюр убран, она выше в цвет контента, верхний бордюр толще, шрифт в ней пожирнее.

Отступы увеличил. "Сделать стартовой" сделал как Вы сказали.

Футер иногда прижимается иногда нет.

[Searcher]

Да как там разглядишь пунктиры, сплошные, какие чего разделяют, совершенно не понятно! Этого не достаточно, потомучто только запутывает, к томуже создает какую-то горизонталь, которая близкак к горизонтали вкладок, но не совпадает, что вызывает ощущение корявости. Да и с эстетической точки зрения кандово.

Основной постулат: не перегружайте мозг посетителя.

С какого перепугу главная - это Каталог сайтов? В пути должно отображаться текущее положение с обратными ссылками. В меню выделено одно, а в пути написано другое. Вы посетителей намеренно путаете? У вас в левом меню все первые уровни, выше них нет ничего. У вас нет главной. Вобщем, это тоже все к основному постулату.

По юзабилити, на скорую руку исправил слишком явную хрень:

[Yahoo!]

Спасибо большое, сделал почти всё как Вы показали на скрине. С логотипом пока ещё не работал, только под него место побольше заготовил) Уголки от меню и рекламы имеют белый цвет, поэтому не совпадает с с серым фоном "Вы находитесь...". Фон немного затемнил, где-то читал, что слишком сильный контраст не есть хорошо, оптимально #333 (шрифт) и #fafafa (фон). С вкладками теперь всё нормально. Закругления у блока с каталогом всех сайтов по моему не мешают. А текущий раздел в меню мне посоветовали выдвинуть вверх.

Может убрать из меню "каталог сайтов" и без этого понятно где я нахожусь?

Edited October 13, 2009 by Yahoo!

[Verder]

http://img395.imageshack.us/img395/310/91652071.jpg

Юзабилити прям прет

Edited October 13, 2009 by Verder

[Searcher]

Спасибо большое, сделал почти всё как Вы показали на скрине. С логотипом пока ещё не работал, только под него место побольше заготовил) Уголки от меню и рекламы имеют белый цвет, поэтому не совпадает с с серым фоном "Вы находитесь...". Фон немного затемнил, где-то читал, что слишком сильный контраст не есть хорошо, оптимально #333 (шрифт) и #fafafa (фон). С вкладками теперь всё нормально. Закругления у блока с каталогом всех сайтов по моему не мешают. А текущий раздел в меню мне посоветовали выдвинуть вверх.

Может убрать из меню "каталог сайтов" и без этого понятно где я нахожусь?

Ну даже от того, что я показал на скрине - далековато. Для такой тематики сайта вы слишком акцентируете внимание на второстепенных элементах. Вы их делаете черезчур яркими и они оттягивают на себя много внимания, от чего у посетителя может начать рябить в глазах. Я же пытался это смягчить.

Изменить уголки у картинок меню и реклама дело 10 минут.

"слишком сильный контраст не есть хорошо, оптимально #333 (шрифт) и #fafafa (фон)" у данного утверждения очень много исключений. Вы ж не в черно-белом мире живете. К томуже подходящую яркость на дисплее каждый пользователь подстраивает сам под себя. В вашей же ситуации это никак не повлияет на юзабилити.

У вас на странице 2 ярких элемента "меню", "реклама", не имеющих отношение к контенту и больше ничего сравнимого по формам и цвету. Это изначально провальный вариант. Если уж вы где-то нашли эти картинки и они вам понравились, так строить все надо в их стиле. В дизайне должна быть единая концепция, иначе это негативно влияет на юзабилити. Тут надо отталкиваться от этих двух картинок: набор цветов, плавность линий, градиенты, усиление контура, размытость границ.

Я вижу вы слабо разбираетесь в фотошопе или других графич. редакторах. Тогда стройте дизайн с ипользованием графики только в уголках, линиях, и прочих мелких элементах.

А вот это "Может убрать из меню "каталог сайтов" и без этого понятно где я нахожусь?" меня вообще убило! Вы то, может и понимаете, а вот посетителю это не так очевидно. А, потом, как вы вернетесь из другого раздела в каталог? Есть необходимый минимум информации, а вы все дурите посетителя и не даете ему сразу понять, где он и что он тут сможет узнать. Учитесь смотреть на сайт со стороны среднего посетителя.

[Yahoo!]

http://img395.imageshack.us/img395/310/91652071.jpg

Юзабилити прям прет wink.gif

Это для того, что б пользователь мог уменьшить размер шрифта и нормально смотреть при разрешений 640х480 (если кто-то на таком смотрит)

Ну даже от того, что я показал на скрине - далековато. Для такой тематики сайта вы слишком акцентируете внимание на второстепенных элементах. Вы их делаете черезчур яркими и они оттягивают на себя много внимания, от чего у посетителя может начать рябить в глазах. Я же пытался это смягчить.

Если я правильно понял, то мне надо убрать лишний контраст в этих заголовках. И вопрос, как это сделать?=))))) Снизить яркость, размер, толщину бордюра?

[Searcher]

Если я правильно понял, то мне надо убрать лишний контраст в этих заголовках. И вопрос, как это сделать?=))))) Снизить яркость, размер, толщину бордюра?

Нарисовать их по-своему и в той гамме цветов, которая будет на сайте. А выделяются они за счет цвета (такого больше нигде нет на странице) и яркости.

Вобщем, это совершенно азбучные вещи и это скорее надо чувствовать. Пробуйте варианты, смотрите глазами рядового посетителя. Встанте на его место и почуствуйте, что не так здесь.

Я не смогу каждую мелочь обсуждать или за вас делать. Сделайте несколько версий дизайна, чтобы все было гармонично, в одной цветовой гамме (3-4 основных цвета), стилистически в одной концепции, читабельно, чтобы самые важные элементы сразу на себя обращали внимание, сравните, выложите тут, и обсудим.

[Yahoo!]

Вот, есть вариант, попытался визуальный центр тяжести сместить на шапку, но чувствую, что с ней надо что-то сделать

дубль 2

[Fenix]

Что это такое?

http://floomby.ru/content/VbDA5SVb0m/

http://floomby.ru/content/0NkGifvQAU/

http://floomby.ru/content/UAlCX5XXhk/

http://floomby.ru/content/tQMhTPgnRE/

[Yahoo!]

http://floomby.ru/content/VbDA5SVb0m/

http://floomby.ru/content/0NkGifvQAU/

это я экспериментировал

http://floomby.ru/content/UAlCX5XXhk/

это браузер походу, я пока не оптимизировал, советую Лисе смотреть

http://floomby.ru/content/tQMhTPgnRE/

большое расстояние=), футер прижал к низу

И вообще не тот сайт посмотрели,

#13 смотрите, я там ссылку дал на другой вариант.

[Searcher]

Вооо, молодца! Это уже гораздо лучше!

Концепция неплохая, теперь надо работать над мелочами.

Первое, что бросается в глаза - поведение ссылок при наведении как-то не соотносится с их назначением... В принципе, люди привыкли, что все ссылки на странице ведут себя одинаково, исключением может быть меню и всякие подменю, они часто ведут себя более наворочено, чем обычные ссылки. Если ссылка отличается по поведению от остальных, возникает подозрение, что нажав на неё мы получим не совсем то, что при нажатии на другие ссылки. Вобщем это уже из разряда психологии...

В данной ситуации, при аскетизме дизайна, в списке категорий ссылки черезчур сильно, да и как-то некрасиво видоизменяются. Не стоит менять фон, лучше менять цвет текста на что-то более яркое. А менять фон можно как-раз в меню, только тогда не нужно подчеркиваний и изменений цвета текста.

А в подменю при наведении можно рисовать такую же как у текущего пункта, только незакрашенную рамку.

Теперь стоит разобраться с размерами шрифтов. В меню привычнее крупный шрифт, в подменю тоже должен быть шрифт крупнее, чем остальной текст.

[psywalker]

Извиняюсь за офтоп!

Searcher

Извини дружище, неудобно спрашивать, а не заглянешь сюда?

http://forum.htmlbook.ru/index.php?showtopic=16546

[Yahoo!]

Подправил.

А как сделать, что б при наведений на ссылку "красивые сайты" вокруг появлялась такая же закругленная рамка? Без скриптов не обойтись?

[psywalker]

Подправил.

А как сделать, что б при наведений на ссылку "красивые сайты" вокруг появлялась такая же закругленная рамка? Без скриптов не обойтись?

Да это же обычный ховер эффект, скрипты ни к чему

[Yahoo!]

Не ну я понимаю, есть див, ему ховером делаем бордюр бэкраунд(легко), а как в этом диве активировать вложенные дивы? А если надо что б див был виден, а вложенных дивов не надо показывать и при наведений они все вместе разом показывались? Если есть решение без скриптов, то буду очень рад услышать.

[psywalker]

Ну вот например тебе один примерчик, правда он громоздкий и грязненький, но главное смысл тебе что-бы понять, посмотри, удали лишнее, сделай под себя: http://psywalker.ru/Forum/Menu/6/main.html

[Yahoo!]

Спасибо за пример, но как я понял, в этом примере реализован раскрывающийся список.

Посмотри, пожалуйста, что у меня. Мне надо чтобы вокруг ссылки "красивые сайты" появлялась такая же рамка, как у соседней надписи "все сайты". Без применения CSS3 и скриптов.

Edited October 17, 2009 by Yahoo!

[psywalker]

Спасибо за пример, но как я понял, в этом примере реализован раскрывающийся список.

Посмотри, пожалуйста, что у меня. Мне надо чтобы вокруг ссылки "красивые сайты" появлялась такая же рамка, как у соседней надписи "все сайты". Без применения CSS3 и скриптов.

Тогда ещё проще, просто сделай под себя: http://habrahabr.ru/blogs/webdev/28517/

[Yahoo!]

Спасибо psywalker, я таким методом пробовал, закругливать углы, но что через фон, можно сделать такой ховер эффект дошло толькошто) Всё теперь задумка реализована полностью.

[psywalker]

Спасибо psywalker, я таким методом пробовал, закругливать углы, но что через фон, можно сделать такой ховер эффект дошло толькошто) Всё теперь задумка реализована полностью.

Не за что, всегда рад помочь